<template>
  <div style="position: relative">
    <div class="content">
      <div class="buttonClass">
        <div style="margin: 10px" class="tag_bootom">
          <el-popover placement="right" trigger="contextmenu" v-model:visible="visible" :width="400">
            <template #reference>
              <el-button style="margin-right: 16px" @click="visible=!visible">{{ name }}
                <icon-right/>
              </el-button>
            </template>
            <div class="tag_bootom_bottom" style="overflow-y: scroll;height: 300px;text-align: center">
              <div v-for="(item,index) in dataLsit " @click="Kind(item,index)"
                   :style="{color:name==item.name?'red':'',background:name==item.name?'#FCEBEB':'',borderRadius:name==item.name?'30px':''}">
                <p style="cursor: pointer;" class="tag_bootom_bottom_p">{{ item.name }}</p>
              </div>
            </div>
          </el-popover>
        </div>
        <div class="text_bottom">
          <div class="text_bottom_p" v-for="(item,index) in datasmallLsit" :key="item.id"
               :class="item.name==name?'active':''"
               @click="Kind(item,index)">
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <!--    <el-button @click="eff">eff</el-button>-->
    <ul class="cradSong" v-infinite-scroll="loaded" infinite-scroll-delay="1000">
      <li v-for="item in videoList" :key="item.id" style="list-style: none;display: flex">
        <card :src="item.data.coverUrl" :description='item.data.title' widthDu="300px"
              @click="$router.push( {path: '/mvList' ,query: {vid:item.data.vid},type:'video'})"></card>
      </li>
    </ul>


  </div>
  <div style="text-align: center" v-show="loading">
    <a-spin/>
  </div>

  <div style="height: 150px;"></div>
</template>

<script setup>
import {GetvideomultilistApi, GetvideolistApi, GetvideosortlistApi} from "~/commonApi/api/index.js"
import {ref} from 'vue'
import card from "~/components/card.vue"

const loading = ref(false)
const containerRef = ref(null);
const dataLsit = ref([])
const datasmallLsit = ref([])
const videoList = ref([])
const visible = ref(false)
const name = ref('')
const id = ref('')
const getdata = async () => {
  const res = await GetvideomultilistApi()
  const resqult = await GetvideolistApi()
  dataLsit.value = res.data.slice(0, 49)
  datasmallLsit.value = resqult.data
  name.value = res.data[0].name
  id.value = res.data[0].id
  dataList()
}
getdata()
let effect = ref(0)
const dataList = async () => {
  loading.value = true
  const response = await GetvideosortlistApi(id.value, effect.value)
  response.datas.forEach((item) => {
    videoList.value.push(item)
  })
  loading.value = false
}


const eff = () => {
  effect.value += 8
  dataList()
}
const Kind = (item) => {
  name.value = item.name
  id.value = item.id
  visible.value = false
  videoList.value = []
  dataList()
}
const loaded = () => {
  eff()
}
</script>

<style scoped lang="scss">
.active {
  background: #FDF5F5;
  color: red;
}

.content {
  position: sticky;
  z-index: 10;
  width: 100%;
  top: 0;

  .buttonClass {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;

    .text_bottom {
      display: flex;

      .text_bottom_p {
        //background: #F2F3F5;
        padding: 10px;
        margin: 0 5px;
        cursor: pointer;
      }


    }
  }
}

.tag_bootom_bottom {
  display: grid;

  grid-template-columns: repeat(4, 25%);
}

.cradSong {
  //overflow: auto;
  display: grid;
  grid-template-columns: repeat(4, 25%);
}

</style>